<script setup lang="ts">
// 文章对象类型
import {onMounted, ref} from "vue";
import axios from "axios";
import {ArticleResData, TitleJS} from "../types/data";
import {useCounterStore} from "../store";
import {storeToRefs} from "pinia";


var config = {
  method: 'get',
  url: 'http://geek.itheima.net/v1_0/mp/articles',
  headers: {
    'Authorization': ' Bearer 2d087800-f3a5-4a66-9feb-74404d350943'
  }
};


type Props = {
  channelID: number,
}
const props = defineProps<Props>()
console.log(props.channelID)

const ContentType = ref<ArticleResData[]>([])

const getList = async ()=> {
  const res = await axios.request<ArticleResData>(config)
  ContentType.value = res.data.data.message
  console.log(ContentType.value)
}



// 实例化pina
const counterStore = useCounterStore()

// 对counterStore进行响应式解构,响应式是指页面能够渲染，这里state，getter
const {count, com_value,data_a} = storeToRefs(counterStore)
// 这里函数action
const { increment,get_data} = counterStore

let data = ref<TitleJS[]>([])

onMounted(()=>
  get_data()
)

</script>

<template>
  <div class="list-box">
    <!-- 列表 -->
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <!-- 无图模式 -->
        <div class="title-box">
          <!-- 标题 -->
          <span> Vue3的优势是什么 </span>
          <button @click="increment">点我</button>
          <span>{{count}}</span>
        </div>
        <div>getterP:{{com_value}}</div>
        <div>{{data_a}}</div>

        <!-- 单图模式 -->
        <!-- <div class="title-box">
          <span>Vue3的优势是什么</span>
          <img class="thumb" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </div> -->

        <!-- 三图模式 -->
        <!-- <div class="thumb-box">
          <img class="thumb" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          <img class="thumb" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          <img class="thumb" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </div> -->
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>作者</span>
            <span>0评论</span>
            <span>8个月前</span>
          </div>
        </div>
      </template>
    </van-cell>

  </div>
</template>


<style scoped lang="less">
.list-box {
  position: fixed;
  top: 50px;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}

/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;

  &:first-child {
    margin-left: 0;
  }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>